<template>
    <div>
       <!--<div>-->
       <!--<span style="font-size:17px;">请选择支付方式:</span>-->
       <!--<span style="font-size:12px;margin-left:11px;color:#FF0909;">如当日充值需要＞4w，请使用不同支付方式（支付宝、微信）进行充值</span>-->
       <!--</div>-->
      <div class="admin-recharge">
        <div>
          <span style="font-size:17px;">请选择支付方式:</span>
          <span style="font-size:12px;margin-left:11px;color:#FF0909;">如当日充值需要＞4w，请使用不同支付方式（支付宝、微信）进行充值</span>
        </div>
        <div style="margin-top:15px;display:flex;">

          <label>
            <div style="height:30px;display:flex;align-items:center;cursor: pointer;">
              <input style="height:30px;line-height:30px;margin-left:10px;" class="radio1" type="radio"
                     :checked='checked' @click="pay_radio()">
              <img style="width:20px;height:20px;line-height:20px;margin:0 5px;" src="../../assets/zhifubao.png"
                   alt="">
              <span>支付宝支付</span>
            </div>

          </label>

          <!--<label>
              <div style="height:30px;display:flex;margin-left:125px;align-items:center;cursor: pointer;">
                  <input style="height:30px;line-height:30px;margin-left:10px;" class="radio1" type="radio"
                         :checked='checkeds' @click="pay_radios()">
                  <img style="width:20px;height:20px;line-height:20px;margin:0 5px;" src="../../assets/wechat.png"
                       alt="">
                  <span style="height:30px;line-height:30px;">微信支付</span>
              </div>

          </label>-->
        </div>
        <div>
          <h2>请选择充值余额:</h2>
          <div style="margin-top:25px;width:60%;">
                <span style="color:#2B2B2B;">账户余额：<b style="color:#FF0000;">1650.94</b> 元， 当日剩余可充值额度：<b
                  style="color:#FF0000;">40000</b></span>
          </div>
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="moneys" :class="{actives:count==1}" @click="pat(1)">
                        <span style="font-size:20px;position: absolute;left:50%;top:50%;margin-left:-35px;margin-top:-15px;"><b
                          style="color:#FF0000;font-size:20px;">1000</b>元</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="moneys" :class="{actives:count==2}" @click="pat(2)">
                        <span style="font-size:20px;position: absolute;left:50%;top:50%;margin-left:-35px;margin-top:-15px;"><b
                          style="color:#FF0000;">2000</b>元</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="moneys" :class="{actives:count==3}" @click="pat(3)">
                        <span style="font-size:20px;position: absolute;left:50%;top:50%;margin-left:-35px;margin-top:-15px;"><b
                          style="color:#FF0000;">5000</b>元</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="moneys" :class="{actives:count==4}" @click="pat(4)">
                        <span style="font-size:20px;position: absolute;left:50%;top:50%;margin-left:-35px;margin-top:-15px;"><b
                          style="color:#FF0000;">10000</b>元</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="moneys" :class="{actives:count==5}" @click="pat(5)">
                        <span style="font-size:20px;position: absolute;left:50%;top:50%;margin-left:-35px;margin-top:-15px;"><b
                          style="color:#FF0000;">20000</b>元</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="moneys" :class="{actives:count==6}" @click="pat(6)">
                        <span style="font-size:20px;position: absolute;left:50%;top:50%;margin-left:-35px;margin-top:-15px;"><b
                          style="color:#FF0000;">25000</b>元</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="moneys" :class="{actives:count==7}" @click="pat(7)">
                        <span style="font-size:20px;position: absolute;left:50%;top:50%;margin-left:-35px;margin-top:-15px;"><b
                          style="color:#FF0000;">30000</b>元</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="moneys" :class="{actives:count==8}" @click="pat(8)">
                        <span style="font-size:20px;position: absolute;left:50%;top:50%;margin-left:-35px;margin-top:-15px;"><b
                          style="color:#FF0000;">35000</b>元</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="moneys" :class="{actives:count==9}" @click="pat(9)">
                        <span style="font-size:20px;position: absolute;left:50%;top:50%;margin-left:-35px;margin-top:-15px;"><b
                          style="color:#FF0000;">40000</b>元</span>
              </div>
            </el-col>
          </el-row>
          <div style="width:109px;height:29px;border-radius:4px;margin-left:431px;margin-top:20px;">
            <el-button type="primary" style="width:150px;" @click="_go">前去支付</el-button>
          </div>
        </div>
      </div>
      <!--<div style="margin-top:15px;display:flex;">-->
        <!--<label>-->
          <!--<div style="height:30px;display:flex;align-items:center;cursor: pointer;">-->
              <!--<input style="height:30px;line-height:30px;margin-left:10px;" class="radio1" type="radio" :checked ='checked'  @click="pay_radio()">-->
              <!--<img style="width:20px;height:20px;line-height:20px;margin:0 5px;" src="../../assets/zhifubao.png" alt="">-->
              <!--<span>支付宝支付</span>-->
          <!--</div>-->
        <!--</label>-->

        <!--<label>-->
          <!--<div style="height:30px;display:flex;margin-left:125px;align-items:center;cursor: pointer;">-->
              <!--<input style="height:30px;line-height:30px;margin-left:10px;" class="radio1" type="radio" :checked ='checkeds'  @click="pay_radios()">-->
              <!--<img style="width:20px;height:20px;line-height:20px;margin:0 5px;" src="../../assets/wechat.png" alt="">-->
              <!--<span style="height:30px;line-height:30px;">微信支付</span>-->
          <!--</div>-->

        <!--</label>-->
      <!--</div>-->
      <!--<div>-->
         <!--<h2>请选择充值余额:</h2>-->
         <!--<div style="margin-top:25px;width:60%;">-->
           <!--<span style="color:#2B2B2B;">账户余额：<b style="color:#FF0000;">1650.94</b> 元， 当日剩余可充值额度：<b style="color:#FF0000;">40000</b></span>-->
         <!--</div>-->
        <!--<el-row :gutter="20">-->
          <!--<el-col :span="5">-->
            <!--<div class="moneys" :class="{actives:count==1}" @click="pat(1)">-->
              <!--<span style="font-size:20px;position: absolute;left:50%;top:50%;margin-left:-35px;margin-top:-15px;"><b style="color:#FF0000;font-size:20px;">1000</b>元</span>-->
            <!--</div>-->
          <!--</el-col>-->
          <!--<el-col :span="5">-->
            <!--<div class="moneys" :class="{actives:count==2}" @click="pat(2)">-->
              <!--<span style="font-size:20px;position: absolute;left:50%;top:50%;margin-left:-35px;margin-top:-15px;"><b style="color:#FF0000;">2000</b>元</span>-->
            <!--</div>-->
          <!--</el-col>-->
          <!--<el-col :span="5">-->
            <!--<div class="moneys" :class="{actives:count==3}" @click="pat(3)">-->
              <!--<span style="font-size:20px;position: absolute;left:50%;top:50%;margin-left:-35px;margin-top:-15px;"><b style="color:#FF0000;">5000</b>元</span>-->
            <!--</div>-->
          <!--</el-col>-->
        <!--</el-row>-->
        <!--<el-row :gutter="20">-->
          <!--<el-col :span="5">-->
            <!--<div class="moneys" :class="{actives:count==4}" @click="pat(4)">-->
              <!--<span style="font-size:20px;position: absolute;left:50%;top:50%;margin-left:-35px;margin-top:-15px;"><b style="color:#FF0000;">10000</b>元</span>-->
            <!--</div>-->
          <!--</el-col>-->
          <!--<el-col :span="5">-->
            <!--<div class="moneys" :class="{actives:count==5}" @click="pat(5)">-->
              <!--<span style="font-size:20px;position: absolute;left:50%;top:50%;margin-left:-35px;margin-top:-15px;"><b style="color:#FF0000;">20000</b>元</span>-->
            <!--</div>-->
          <!--</el-col>-->
          <!--<el-col :span="5">-->
            <!--<div class="moneys" :class="{actives:count==6}" @click="pat(6)">-->
              <!--<span style="font-size:20px;position: absolute;left:50%;top:50%;margin-left:-35px;margin-top:-15px;"><b style="color:#FF0000;">25000</b>元</span>-->


            <!--</div>-->
          <!--</el-col>-->
        <!--</el-row>-->
      <!--</div>-->
    </div>
</template>

<script>
    export default {
        name: "Admin_Recharge",
        data() {
            return {
                checked: true,
                checkeds: false,
                count: 0
            }
        },
        methods: {
            _go() {
              this.$router.push('/mdd/accountrecharge')
            },
            pat(index) {
                this.count = index
            },
            pay_radio() {
                if (this.checked == false) {
                    this.checked = true;
                    this.checkeds = false
                }
            },
            pay_radios() {
                if (this.checkeds == false) {
                    this.checked = false;
                    this.checkeds = true
                }
            }
        }
    }
</script>

<style lang="scss">
    .admin-recharge {
        .moneys {
            position: relative;
            width: 215px;
            height: 72px;
            margin-top: 56px;
            margin-left: 60px;
            cursor: pointer;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(210, 210, 210, 1);
            border-radius: 4px;
        }
        .actives {
            background: url("../../assets/menhuang.png");
            background-size: cover;
            /*border:0 solid rgb(0,126,155);*/
        }
        .el-input {
            height: 30px !important;
        }
    }

</style>
